const html = document.documentElement;

const screenHeight = html.clientHeight;

window.addEventListener("scroll", function (e) {
	let index = html.scrollTop / screenHeight;

	html.style.setProperty("--part1", getOpacity(0, index));
	html.style.setProperty("--part2", getOpacity(1, index));
	html.style.setProperty("--part3", getOpacity(2, index));
	html.style.setProperty("--part4", getOpacity(3, index));
	html.style.setProperty("--part5", getOpacity(4, index));
	html.style.setProperty("--part6", getOpacity(5, index));
	html.style.setProperty("--part7", getOpacity(6, index));
});

function getOpacity(idx, index) {
	if (!(1 > index - idx && index - idx > 0)) {
		return 0;
	}
	let opacity = index - Math.round(index);

	return opacity > 0 ? opacity : 1 + opacity;
}
